<template>
  <main-layout
    title="项目管理"
    :showHome="true"
    :showNew="true"
    @newEvent="toNewPage"
  >
    <ul @scroll="scrollEvt" class="list-box">
      <li class="item" v-for="it in list" :key="it.id">
        <span class="title">{{ it.name }}</span>
        <span class="man">负责人:{{ it.ownerName }}</span>
        <span class="date">签订日期:{{ it.signTime | fliter }}</span>
        <span class="adress">地址:{{ it.ownerAddress }}</span>
        <div class="pic">
          <i @click="toNewPage(it)"></i>
          <i class="dd"></i>
        </div>
      </li>
      <li v-if="loading" class="loading">加载中</li>
      <!-- 当数据还有时，就显示'上滑加载更多'  没有时就显示'没有了，不用在滑了' -->
      <li v-if="!loading && hasMore" class="loading">上滑加载更多</li>
      <li v-if="!hasMore && !loading" class="loading">没有了，不用在滑了</li>
    </ul>
  </main-layout>
</template>

<script>
import { ProApi } from "../../apis/proApis";
export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 4,
      loading: true,
      //   定义是否后端还有数据的标志
      hasMore: true,
    };
  },
  created() {
    this.getData();
  },
  computed: {
    // 判断权限，要先拿到权限  从store中拿
    userRight() {
      return this.$store.getters["common/userRight"];
         },
  },
  methods: {
    async getData() {
      console.log("evt", this.loading);
      let result = await ProApi({ name: "", page: this.page, size: this.size });
      console.log(result);
      //   实现节流，昂滚动到底部，并且数据没有处于加载状态下
      if (result.code === 200) {
        this.list = this.list.concat(result.data.rows);
        // 判断是否有下一页的数据 
        this.hasMore = this.page * this.size < result.data.total;
      }
      setTimeout(() => {
        //  当数据请求时
        this.loading = false;
      });
    },
    // 分页
    scrollEvt(evt) {
      console.log("滚动", this.loading);
      //   整个高度
      console.log("evt", evt.target.scrollHeight);
      //   可视区域高度
      console.log("evt", evt.target.offsetHeight);
      //   滚动高度
      console.log("evt", evt.target.scrollTop);
      //   判断是否到达底部
      let isBottom =
        evt.target.scrollHeight -
          (evt.target.offsetHeight + evt.target.scrollTop) -
          20 <
        0;
      // 实现节流，当滚动到顶部，并且数据没有在加载状态下，才能去请求加载数据
      // 在没有更多的数据下不能发起请求
      //        true        false             true
      if (isBottom && !this.loading && this.hasMore) {
        this.loading = true;
        this.page += 1;
        // 请求数据
        this.getData();
      }
    },
    // 去编辑页面
    toNewPage(row) {
        console.log('row',row)
      // 判断是去编辑页面还是新增页面
      let isEditPage = !!row;
      console.log('user',this.userRight)
      let right = this.userRight.find((it) => it.id === "PROJECT-01-01");
      if (!!right) {
        //  不是编辑并且存在权限C 页面就跳转 {name:"",query:{id:,from:""} 路由传参
        if (!isEditPage && right.role.includes("C")) {
          //  query参数，id表示当前编辑的项目编码，from 表示从列表页面过去，需要编辑页面返回到列表
          this.$router.push({ name: "editProject", query: { from: "list" } });
        } else {
          if (!!isEditPage) {
            if (right.role.includes("C")) {
              this.$router.push({
                name: "editProject",
                query: { id: row.id, from: "list" },
              });
            } else {
              this.$toast.fail("您没有这个权限");
            }
          } else {
            this.$toast.fail("您没有这个权限");
          }
        }
      } else {
        this.$toast.fail("您没有这个权限");
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.list-box {
  width: 95%;
  height: 100%;
  margin: auto;
  display: block;
  position: relative;
  overflow-x: hidden;
  padding: 10px 0;
  > .item {
    display: block;
    position: relative;
    line-height: 18px;
    margin-bottom: 12px;
    border-bottom: 1px solid @abc;
    padding: 10px 0;
    span {
      display: block;
      position: relative;
      font-size: 0.7rem;
      color: @c99;
      margin-bottom: 10px;
      &.title {
        font-size: 20px;
        line-height: 26px;
        color: @primary;
      }
    }
    .pic {
      display: block;
      position: absolute;
      width: 36px;
      right: 15px;
      top: 20px;
      height: 75px;
      > i {
        width: 36px;
        height: 36px;
        display: block;
        background: url(../../image/edit-icon.png) center center/36px 36px
          no-repeat;
        &.dd {
          background-image: url(../../image/close-icon.png);
        }
      }
    }
  }
  .loading {
    display: block;
    font-size: 0.6rem;
    line-height: 30px;
  }
}
</style>